<template>
  <div class="warning-message">
    <CommTitle :title="title" />
    <table class="warning-message-table">
      <el-select
        v-if="showSlect"
        class="warning-select"
        v-model="warningType"
        placeholder="请选择"
        clearable
        style="width: 85px"
      >
        <el-option label="区域" value="区域" />
        <el-option label="型架" value="型架" />
        <el-option label="AGV" value="AGV" />
      </el-select>
      <div class="bubble-alarm" :title="`${tableList.length}项异常`" v-if="tableList.length">
        {{ tableList.length }}
      </div>
      <thead v-if="filtrateList.length">
        <tr class="table-th">
          <th>序号</th>
          <th>报警区域</th>
          <!-- <th>报警代码</th> -->
          <th>报警说明</th>
          <th>报警时间</th>
        </tr>
      </thead>

      <tbody ref="tableRef" v-if="filtrateList.length" @mouseover="stopScroll" @mouseleave="startScroll">
        <tr v-for="(item, index) in filtrateList" :key="index" :class="[{ 'even-bg': index % 2 === 0 }]">
          <td>{{ index + 1 }}</td>
          <el-tooltip
            :hide-after="0"
            popper-class="atooltip"
            placement="top"
            raw-content
            :content="insertLineBreaks(item?.alarmArea || '')"
          >
            <td>{{ item?.alarmArea }}</td>
          </el-tooltip>
          <!-- <td>{{ item?.alarmCode }}</td> -->

          <el-tooltip
            :hide-after="0"
            popper-class="atooltip"
            placement="top-start"
            raw-content
            :content="insertLineBreaks(item?.alarmExplain || '')"
          >
            <td>{{ item?.alarmExplain }}</td>
          </el-tooltip>
          <td>{{ dayjs(item?.alarmTime).format('YYYY/MM/DD HH:mm:ss') }}</td>
        </tr>
      </tbody>
      <p v-else>暂无报警数据..</p>
    </table>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick, onBeforeUnmount, computed, toRefs } from 'vue'
import CommTitle from './CommTitle.vue'
import dayjs from 'dayjs'
import { useStore } from 'vuex'
const store = useStore()
const { alarmListData } = toRefs(store.state)

const props = defineProps({
  title: {
    type: String,
    default: '报警汇总'
  },
  // alarmListData: {
  //   type: Array,
  //   // required: true,
  //   default: () => {
  //     return [
  //       // {
  //       //   alarmArea: '区域3-5PLC',
  //       //   alarmCode: '3',
  //       //   alarmTime: '2025/9/3 08:10:10',
  //       //   alarmExplain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
  //       // },
  //       // {
  //       //   alarmArea: '型架PLC',
  //       //   alarmCode: '07',
  //       //   alarmTime: '2025/9/3 08:10:10',
  //       //   alarmExplain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
  //       // },
  //     ]
  //   }
  // },
  showSlect: {
    type: Boolean,
    default: true
  }
})

function insertLineBreaks (text) {
  let result = '<span>'
  for (let i = 0; i < text.length; i += 20) {
    result += `${text.slice(i, i + 20)}<br />`
  }
  result.slice(0, -6)

  return (result += '<span>')
}

// #region  列表滚动
let scrollInterval = null
const tableRef = ref(null)
function startScroll () {
  stopScroll()
  scrollInterval = setInterval(scroll, 60)
}
function stopScroll () {
  scrollInterval && clearInterval(scrollInterval)
  scrollInterval = null
}

function scroll () {
  if (!alarmListData.value.length) return
  if (!tableRef.value?.scrollTop === undefined) return
  tableRef.value.scrollTop += 1
  const ListHeight = tableRef.value.clientHeight
  // console.log('实际高度', tableRef.value.scrollHeight)
  // console.log('元素高度', ListHeight)
  // console.log('已经滚动高度', tableRef.value.scrollTop)
  // console.log('窗口大小', (tableRef.value.scrollHeight - ListHeight))
  if (tableRef.value.scrollTop + 5 >= tableRef.value.scrollHeight - ListHeight) {
    const childrens = tableRef.value.children
    const dom = childrens[0]
    const maxDomNum = Math.ceil(ListHeight / dom.clientHeight)

    if (childrens.length > maxDomNum) {
      // tableRef.value.removeChild(dom)
      // 根据奇偶行添加背景色,并且有背景色则是删除背景色
      if (childrens[childrens.length - 1].classList.contains('even-bg')) {
        dom.classList.remove('even-bg')
      } else {
        dom.classList.add('even-bg')
      }
      // listRef.value.removeChild(dom) // 根据DOM API，appendChild方法在节点已存在时会自动移动它，无需先调用removeChild
      tableRef.value.append(dom)
    }
  }
}
// #endregion

// -----------------------------
const tableList = computed(() => {
  if (props.title === '报警汇总') {
    return alarmListData.value
  } else {
    // tudo 出来区域报警列表信息
    return alarmListData.value
  }
})
const warningType = ref('')
const filtrateList = computed(() => {
  return tableList.value.filter(item => {
    return !warningType.value || item.alarmArea.includes(warningType.value)
  })
})

onMounted(() => {
  nextTick(() => {
    startScroll()
  })
})
onBeforeUnmount(() => {
  console.log('消费')

  stopScroll()
})
</script>

<style lang="less">
.warning-message {
  height: 50%;
  display: flex;
  flex-direction: column;
  .warning-message-table {
    height: calc(100% - 60px);
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    // background-color: rgba(255, 0, 0, 0.525);
    display: flex;
    flex-direction: column;
    position: relative;
    //  下拉选择框
    .warning-select {
      position: absolute;
      top: -40px;
      right: 15px;
      z-index: 999;
      .el-select__wrapper {
        // background-color: rgba(75, 137, 255, 0.2);
        background: url('@/assets/homePage/row.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: none;
        .is-focused {
          box-shadow: 0 0 0 1px #ccc;
        }
        .el-select__selected-item {
          color: #ffffff;
        }
      }
    }
    // 气泡
    .bubble-alarm {
      position: absolute;
      cursor: pointer;
      top: -56px;
      left: 110px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 12px;
      text-align: center;
      // text-indent: 2px;
      line-height: 21px;
      background-color: red;
    }

    thead {
      tr {
        font-family: Source Han Sans CN;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        margin-bottom: 5px;
        th {
          &:nth-child(1) {
            width: 8%;
          }
          &:nth-child(2) {
            width: 18%;
          }
          &:nth-child(3) {
            width: 39%;
          }
          &:nth-child(4) {
            width: 35%;
          }
          // &:nth-child(5) {
          //   width: 25%;
          // }
        }
      }
    }

    tbody {
      flex: 1;
      // background-color: rgba(4, 255, 0, 0.595);
      font-family: Source Han Sans CN;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
        // width: 0;
      }

      tr {
        display: block;
        width: 100%;
        height: 36px;
        margin-bottom: 4px;
        line-height: 36px;
        &.even-bg {
          background: url('@/assets/homePage/row.png') no-repeat;
          background-size: 100% 100%;
          transition: background 0.3s ease-in-out; /* 添加过渡效果 */
        }
        &:hover {
          background: url('@/assets/homePage/row-hover.png') no-repeat;
          background-size: 100% 100%;
        }

        td {
          display: inline-block;
          font-size: 12px;
          color: #ffffff;
          box-sizing: border-box;
          padding: 0 4px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &:nth-child(1) {
            width: 8%;
          }
          &:nth-child(2) {
            width: 18%;
          }
          &:nth-child(3) {
            width: 39%;
          }
          &:nth-child(4) {
            width: 35%;
          }
          &:nth-child(5) {
            // width: 25%;
          }
        }
      }
    }

  }
}
</style>
